<template>
  <div class="cl-charts">
    <div class="top">
      <el-form>
        <el-form-item label="级别：">
          <el-radio-group v-model="typeValue">
            <template v-for="item in typeOptions">
              <el-radio :value="item.value">{{item.label}}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据：">
          <el-radio-group v-model="page">
            <template v-for="item in pageOptions">
              <el-radio :value="item.value">{{item.label}}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <c-c-stock class="stock" :stock-type="typeValue" is-auto :page-size="page"></c-c-stock>
    </div>
  </div>
</template>


<script setup>
import {ref} from 'vue';
import {typeOptions, pageOptions} from '../utils/listData.js';

import CCStock from "../c-components/c-stock.vue";
import CRadio from "../c-components/c-radio.vue";

const typeValue = ref('101')

const page = ref(120)


</script>


<style lang="scss" scoped>
.cl-charts{
}

</style>
